<template>
  <div class="order-sum">
    <div>
      <span class="down-execel">
        <Poptip v-model="showFilter" placement="bottom-end">
          <i class="el-icon-search poptip-condition-add"></i>
          <a href="javascript:;" class="poptip-condition-add">列表查找</a>
          <div slot="content">
            <Poptip v-model="showFilterCondition" placement="bottom-start" class="poptip-condition">
              <i class="el-icon-plus"></i>
              <a href="javascript:;">添加过滤条件</a>
              <div slot="content" class="condition-list">
                <ul>
                  <li
                    v-for="(item, index) in selectHead"
                    :key="index"
                    class="poptip-condition-item"
                    @click="addFilterCondition(item)"
                  >{{item.label}}</li>
                </ul>
              </div>
            </Poptip>
            <el-form
              :model="conditionForm"
              @submit.native.prevent
              ref="conditionForm"
              label-width="120px"
              class="demo-dynamic"
            >
              <el-form-item
                v-for="(condition, index) in conditionForm.condition"
                :label="condition.label"
                :key="condition.key"
                :prop="'condition.' + index + '.value'"
                :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}"
              >
                <el-select
                  v-if="condition.label === '流程人员'"
                  v-model="condition.value"
                  placeholder="请选择流程人员"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in processOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-else-if="condition.label === '代理人'"
                  v-model="condition.value"
                  placeholder="请选择代理人"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in agentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
                <el-date-picker
                  v-model="condition.value"
                  type="daterange"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :validate-event="false"
                  v-else-if="condition.label === '时间选择'"
                ></el-date-picker>
                <el-input
                  v-else
                  size="small"
                  v-model="condition.value"
                  @keyup.enter.native="submitsearch('conditionForm')"
                ></el-input>
                <el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
              </el-form-item>
            </el-form>

            <div class="btns">
              <el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
              <el-button @click="resetForm('conditionForm')" size="mini">重置</el-button>
            </div>
          </div>
        </Poptip>
      </span>
    </div>
    <el-table
      :data="tableData"
      ref="order-table"
      border
      @sort-change="tableSortChange"
      @row-click="getDetail"
    >
      <el-table-column width="60" align="left" label="ID">
        <template slot-scope="scope">{{(scope.$index + 1) + (current_page - 1) * per_page}}</template>
      </el-table-column>
      <el-table-column
        label="代理人"
        sortable="custom"
        prop="name"
        min-width="120"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="订单结算(元)"
        prop="settlementMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.settlementMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="推荐奖励(元)"
        sortable="custom"
        prop="distributionMoney"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.distributionMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="累计结算(元)"
        prop="allMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.allMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="平台惩戒(元)"
        prop="deductionMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.deductionMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="平台奖励(元)"
        prop="rewardMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.rewardMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="钱包余额(元)"
        prop="coin"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.coin || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="可用余额(元)"
        prop="canUserMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.canUserMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="冻结金额(元)"
        prop="frozenMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.frozenMoney || '0.00'}}</template>
      </el-table-column>
      <el-table-column
        label="提现金额(元)"
        prop="drawMoney"
        sortable="custom"
        align="left"
        min-width="130"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.drawMoney || '0.00'}}</template>
      </el-table-column>

      <el-table-column label="操作" width="100" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click.stop="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @paginationChange="pageChange" :total="total"></pagination>
    <bank-detail ref="bank-detail"></bank-detail>
    <editAgentBank ref="editAgentBank" :agentOptions="agentOptions" @refresh="getTableData" />
  </div>
</template>

<script>
import pagination from "~/components/pagination";
import bankDetail from "./components/bank-detail";
import editAgentBank from "./components/edit-agentBank";
export default {
  components: {
    pagination,
    bankDetail,
    editAgentBank
  },

  data() {
    return {
      tableData: [],
      current_page: 1,
      agentOptions: [],
      per_page: 25,
      total: 0,
      sort_params: {},
      search_params: {},
      showFilter: false,
      showFilterCondition: false,
      // 筛选条件
      conditionForm: {
        condition: []
      },
      selectHead: [
        {
          label: "代理人",
          props: "name"
        },
        {
          label: "时间选择",
          props: "time"
        }
      ]
    };
  },

  created() {
    this.getAllAgent();
    this.getTableData();
  },

  methods: {
    getDetail(row) {
      this.$refs["bank-detail"].showOn(row.id);
    },
    tableSortChange(column) {
      this.sort_params = {
        sort_str: column.prop
      };
      if (column.order == "ascending") {
        this.sort_params.sort_order = "asc";
      } else if (column.order == "descending") {
        this.sort_params.sort_order = "desc";
      } else {
        this.sort_params = {};
      }
      this.getTableData();
    },
    pageChange(data) {
      this.per_page = data.perPage;
      this.current_page = data.page;
      this.getTableData();
    },
    getTableData() {
      let params = {
        page: this.current_page,
        perPage: this.per_page
      };
      params = { ...params, ...this.sort_params, ...this.search_params };
      this.$axios
        .get("/api/drawing/wallet/agent_count", {
          params: params
        })
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.page.total;
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
    },
    addFilterCondition(item) {
      let filterItem = {
        value: "",
        label: item.label,
        parameter: item.props,
        key: Date.now()
      };

      if (this.conditionForm.condition.length > 0) {
        let conditionlabels = [];
        for (let i = 0; i < this.conditionForm.condition.length; i++) {
          conditionlabels.push(this.conditionForm.condition[i].label);
        }
        let Check = conditionlabels.indexOf(item.label);
        Check == -1
          ? this.conditionForm.condition.push(filterItem)
          : this.$message.error("请勿重复添加");
      } else {
        this.conditionForm.condition.push(filterItem);
      }

      this.showFilterCondition = false;
    },
    removeDomain(item) {
      let index = this.conditionForm.condition.indexOf(item);
      if (index !== -1) {
        this.conditionForm.condition.splice(index, 1);
      }
      if (item.label === "时间选择") {
        delete this.search_params.start_time;
        delete this.search_params.end_time;
      }
      let props = JSON.parse(JSON.stringify(this.conditionForm.condition));
      let params = {};
      props.forEach(v => {
        params[v.parameter] = v.value;
      });
      if (params.time) {
        params.start_time = params.time[0];
        params.end_time = params.time[1];
        delete params.time;
      }
      this.current_page = 1;
      this.$refs["order-table"].clearSort();
      this.sort_params = {};
      this.search_params = { ...params };
      this.getTableData();
    },
    submitsearch(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let props = JSON.parse(JSON.stringify(this.conditionForm.condition));
          let params = {};
          props.forEach(v => {
            params[v.parameter] = v.value;
          });
          if (params.time) {
            params.start_time = params.time[0];
            params.end_time = params.time[1];
            delete params.time;
          }
          this.current_page = 1;
          this.$refs["order-table"].clearSort();
          this.sort_params = {};
          this.search_params = { ...params };
          this.getTableData();
          this.showFilterCondition = false;
          this.showFilter = false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.conditionForm.condition.forEach(v => {
        if (v.value) {
          v.value = null;
        }
      });
      this.$refs["order-table"].clearSort();
      this.sort_params = {};
      this.search_params = {};
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
      });
      // this.getTableData()
      // this.showFilterCondition = false
      // this.showFilter = false
    },
    getAllAgent() {
      this.$axios
        .get("api/user/agent")
        .then(res => {
          if (res.data.code == 200) {
            this.agentOptions = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });

      this.$axios
        .get("api/user/process")
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            this.processOptions = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });
    },
    edit(data) {
      this.$refs["editAgentBank"].show(data);
    }
  },

  watch: {}
};
</script>

<style lang="less" scoped>
.order-sum {
  height: 100%;
  /deep/.el-table {
    .img-wrap {
      display: flex;
      justify-content: center;
      > div {
        height: 23px;
      }
      .el-image {
        width: 23px;
        height: 23px;
      }
    }
  }
  /deep/.ivu-poptip-inner {
    min-width: 450px;
    // height: 300px;
    overflow-y: scroll;
  }

  /deep/.poptip-condition .ivu-poptip-inner {
    min-width: 180px;
  }

  .demo-dynamic {
    padding-left: 10px;

    .el-form-item {
      margin-bottom: 12px;
    }

    .el-input {
      width: 240px;
    }

    .el-date-editor {
      width: 240px;
    }

    .el-button {
      padding: 9px 15px;
      vertical-align: baseline;
    }

    .el-form-item__error {
      padding-top: 0;
    }
  }

  .poptip-condition {
    display: block;
    margin-top: 10px;

    .poptip-condition-item {
      line-height: 25px;
      cursor: pointer;
    }

    .poptip-condition-add {
      font-size: 14px;
    }
  }

  .btns {
    margin-top: 10px;
  }
  .el-select {
    width: 240px;
  }
}
</style>
